pp108 : Event Model Changes for Multi-browser Support

Event Model Changes for Multi-browser Support
This topic describes the changes required in the event models to ensure multi-browser support.

So far, window.event was used for standard HTML events in accordance with the Internet Explorer browser. In other browsers, eventObject is the first parameter passed when an method is executed. So, in order to support multi-browsers, all methods must pass the event object or must use the global object if no event object is present.

To ensure multi-browser support, you can use one of the following options to attach methods to events.

  • Methods can be attached to events using only a function pointer, as shown below. 
    myDiv.onclick = eventHandler;
  • You can also attach events to methods through HTML, as shown below. 
    <div onclick="eventHandler(event)"/>

    Note:
    The onclick event, when used with the Contextmenu library, is not supported by browsers other than the Internet Explorer. For multi-browser support, ensure that you use the onmenuitemclick event instead.

  • The earlier way of attaching methods to events through HTML may not be supported on all browsers. Process Platform provides the following generic method that is supported by all browsers and must be used programmatically to attach the events. 
    cordys.addDOMListener(myDiv, "onclick", eventHandler);

After an event is attached to a method, it can be accessed in a method as given below.

function eventHandler(eventObject) { if (! eventObject ) eventObject = window.event; }

In cases where the srcElement of an event is not the same as the element that raised the event, you can pass the this pointer to the inline methods as shown below.

<div onclick="inlineEventHandler(event,this)">

Note

In case of the onmenuitemclick event used with the Contextmenu library,

  • the this property does not refer to the menu item, but to the contextmenu definition object.
  • the event property refers to the custom eventObject. The properties availble for use are as follows.
    • event.activeElement: Refers to the HTML element to which the contextmenu is attached.
    • event.srcEvent: Refers to the event associated with the onmouseup action on the visible HTML of the contextmenu.

Handling events on DIV

Browsers, other than the Internet Explorer browser, cannot properly handle events such asonfocusandonblurwhen present in a<div>tag. To enable browsers to handle these events, add tabIndex=0 (or any higher number other than 0) to the <div> tag.

Event Properties

Different browsers handle events in different ways. As a consequence, a variety of event properties are available and their usage differs from browser to browser. For example, the event used to determine the position of a mousedown or identify the mouse button clicked, differs from browser to browser.

The following table provides information about the events available on various browsers.

Table 1. List of Event Properties of Various Browsers

Event Property

Description

Internet Explorer

Firefox

Chrome

Safari

button

Invokes a mouse button. For example, when used in themousedownevent.

0=default (=n/a)1=Left2=right4=middle

0=Left(default)1=middle2=right

0=Left(default)1=middle2=right

0=Left(default)1=middle2=right

offsetX

Refers to the coordinates relative to object.

v

n/a

v

v

wheelDelta

Retrieves the distance and the direction in which the wheel button has rolled.

v

n/a

v

v

detail

Retrieves the distance and the direction in which the wheel button has rolled.

n/a

v

n/a

n/a

layerX

Refers to the coordinates relative to the object in current layer.

n/a

v

v

v

clientX

Refers to the coordinates relative to the client area.

v

v

v

v

pageX

Refers to the coordinates relative to the page as visible in the application window, disregarding scrolled area.

n/a

v

v

v

x

Refers to the coordinates relative to the specified parent element .

v - calc. diff. compared chrome/safari

n/a

v

v

screenX

Refers to the coordinates relative to the screen (main screen, in case of dual screen support).

v

v

v

v

type

Refer to the type of event, for example, mousedown.

v

v

v

v

srcElement

Refer to the object that fired the event.

v

n/a

v

v

target

Returns the reference of the target to which an event is originally dispatched.

n/a

v

v

v

currentTarget

Refers to the current object that is the target of the event.

n/a

v

v

v

explicitOriginalTarget

Refers to the original target of the event.

n/a

v

n/a

n/a

originalTarget

Refers to the original target of the event, prior to any changes that may have been made to the target.

n/a

v

n/a

n/a

where, 'v' is denotes that the event property is available for the respective browser and 'n/a denotes that the event property is not applicable to the respective browser.
For information about specific wrappers provided in Process Platform, see cordys.